<template>
    <div>
        
        <div v-if="val">
            <div class="xxgl">信息管理</div>
            <el-row type="flex" justify="space-around">                                                                        
            <el-col :span="6">
                <div class="demo-image" @click="goTo('student')">  
                    <el-image
                    style="width: 260px; height: 260px"
                    src="../../../../public/img/学生信息管理.png"
                    ></el-image>
                    <div class="demonstration">学生信息管理</div> 
                </div> 
            </el-col>     
            <!-- <el-col :span="6">
                <div class="demo-image2" @click="goTo('sushe')">  
                    <el-image
                    style="margin-top:60px;width: 130px; height: 130px"
                    src="./../../../public/img/宿舍信息管理.png"
                    ></el-image>
                    <div class="demonstration">宿舍信息管理</div> 
                </div> 
            </el-col>             -->
            <el-col :span="6">
                <div class="demo-image2" @click="goTo('weixiu')">  
                    <el-image
                    style="margin-top:60px;width: 130px; height: 130px"
                    src='../../../../public/img/宿舍维修管理.png'
                    ></el-image>
                    <div class="demonstration">宿舍维修管理</div> 
                </div> 
            </el-col>            
        </el-row>
        </div>
        <div v-else>
            <InfoIndex :type="type" ></InfoIndex>
        </div>
    </div>
    <!-- <router-view></router-view> -->
</template>

<script setup >
    import {useRouter} from 'vue-router';
    import InfoIndex from "@/views/Info/index.vue"
    import {ref} from "vue"
    const type = ref('')
    const val = ref(true);
    const router = useRouter();
     const goTo = (types)=>{
        type.value = types;
        val.value = false;
     }

</script>

<style scoped lang="scss">
.xxgl{
    text-align: center;
    margin: 55px 0;
    font-size:30px;
    font-weight:bold
}
.demo-image{
    width:300px;
    height:300px;
    background-color: white;
    text-align: center;
    .demonstration{
        margin-top: -40px;
        font-size: 30px;
    }
}
.demo-image2{
    width:300px;
    height:300px;   
    background-color: white;
    text-align: center;
    .demonstration{
        margin-top: 25px;
        font-size: 30px;
    }
}
</style>
